import React, { Children, lazy, Suspense } from "react"
import { Navigate } from "react-router-dom"
import Home from "../views/Home"
import Login from "../views/Login"

const User = lazy(() => import("../views/User"))
const Page1 = lazy(() => import("../views/Page1"))
const Page2 = lazy(() => import("../views/Page2"))
const Page301 = lazy(() => import("../views/Page301"))
const Page302 = lazy(() => import("../views/Page302"))
const Page303 = lazy(() => import("../views/Page303"))
const Page401 = lazy(() => import("../views/Page401"))
const Page402 = lazy(() => import("../views/Page402"))



// 懒加载模式的组件的写法，外面要套一层Loading的提示加载组件
const withLoadingComponent = (comp: JSX.Element) => (
    // fallback值的是在还没有成功加载路由组件时，会先执行fallback的内容，然后当加载完毕之后才会渲染路由子组件
    <React.Suspense fallback={<div>Loading...</div>}>
        {comp}
        {/* 标签里面写活的东西必须加{} ---JSX语法 */}
    </React.Suspense>
)

const routes = [
    {
        path: '/',
        element: <Navigate to="/page1" />//重定向
    },
    {
        path: '/',
        element: <Home />,//侧边栏及内容都是home页面包含的 page1只是home页面的内容部分
        children: [
            {
                path: '/page1',
                element: withLoadingComponent(<Page1 />)
            },
            {
                path: '/page2',
                element: withLoadingComponent(<Page2 />)
            },
            {
                path: 'page3/page301',
                element: withLoadingComponent(<Page301 />)
            },
            {
                path: 'page3/page302',
                element: withLoadingComponent(<Page302 />)
            },
            {
                path: 'page3/page303',
                element: withLoadingComponent(<Page303 />)
            },
            {
                path: 'page4/page401',
                element: withLoadingComponent(<Page401 />)
            },
            {
                path: 'page4/page402',
                element: withLoadingComponent(<Page402 />)
            },
        ]
    },
    {
        path: '/login',
        element: <Login />
    },
    //跳无法识别路径的时候，自动定位page1页面
    {
        path: '*',
        element: <Navigate to="/page1" />//重定向
    }
]
export default routes
